<template>
    <div class="pictures-lunbo">
      <el-carousel
        :interval="0"
        arrow="never"
        :autoplay="false"
        indicator-position="none"
        :before-change="handleBeforeChange"
        ref="myCarousel"
        height="440px"
        width="477px"
      >
        <el-carousel-item v-for="(imgUrl, index) in imgsUrl" :key="index" >
          <img :src="imgUrl" alt="图片" @mousedown="startDrag" @mousemove="dragImage" @mouseup="endDrag">
        </el-carousel-item>

      </el-carousel>

      <div class="control">
        <el-button type="text" v-show="currentIndex > 0" @click="prevSlide" style="font-size: 20px;">&lt;  &nbsp;&nbsp;</el-button>
        <span class="page-indicator">{{currentIndex + 1}} / {{imgsUrl.length}}</span>
        <el-button type="text" v-show="currentIndex < imgsUrl.length - 1" @click="nextSlide" style="font-size: 20px;">  &nbsp;&nbsp;></el-button>
      </div>
    </div>
  </template>

<script>
export default {
  data () {
    return {
      imgsUrl: [
        require('@/assets/YiJin8/易经卷一1.png'),
        require('@/assets/YiJin8/易经卷一2.png'),
        require('@/assets/YiJin8/易经卷一3.png'),
        require('@/assets/YiJin8/易经卷一4.png'),
        require('@/assets/YiJin8/易经卷一5.png'),
        require('@/assets/YiJin8/易经卷一6.png'),
        require('@/assets/YiJin8/易经卷一7.png'),
        require('@/assets/YiJin8/易经卷一8.png')
      ],
      currentIndex: 0,
      zoom: 1,
      offsetX: 0,
      offsetY: 0,
      dragging: false,
      lastX: 0,
      lastY: 0,
      carouselSwipeEnabled: true
    }
  },
  computed: {
    imageStyle () {
      return {
        transform: `scale(${this.zoom}) translate(${this.offsetX}px, ${this.offsetY}px)`,
        cursor: this.dragging ? 'grabbing' : 'grab'
      }
    }
  },
  methods: {
    prevSlide () {
      this.$refs.myCarousel.prev()
      this.currentIndex--
    },
    nextSlide () {
      this.$refs.myCarousel.next()
      this.currentIndex++
    },
    zoomImage (event) {
      if (event.deltaY > 0) {
        this.zoom -= 0.1
      } else {
        this.zoom += 0.1
      }
    },
    startDrag (event) {
      if (event.button === 0) { // 检查鼠标左键按下
        this.dragging = true
        this.lastX = event.clientX
        this.lastY = event.clientY
      }
    },
    dragImage (event) {
      if (this.dragging) {
        this.offsetX += event.clientX - this.lastX
        this.offsetY += event.clientY - this.lastY
        this.lastX = event.clientX
        this.lastY = event.clientY
      }
    },
    endDrag () {
      this.dragging = false
    },
    disableCarouselSwipe () {
      this.carouselSwipeEnabled = false
    },
    enableCarouselSwipe () {
      this.carouselSwipeEnabled = true
    },
    handleBeforeChange (index) {
      this.currentIndex = index
    }
  }
}
</script>

  <style scoped>
  .pictures-lunbo {
    text-align: center;
    /* position: relative; */
    width: 403px;
    height: 458px;
    background-color: rgba(0, 0, 0, 0.5);
  }

  .el-carousel__item img {
    max-width: 443px;
    max-height: 458px;
  }

  .control {
    align-items: center;
    padding: 3px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    margin-top: 16px;
    display:block;
    height: 35px;

  }

  .control-left,
  .control-right {
    font-size: 20px;
    cursor: pointer;
  }

  .page-indicator {
    font-size: 16px;
  }
  </style>
